<script setup lang="ts">
</script>

<template>
  <div class="container-md text-white">
    <div class="pc">
      <div><h1>xxxx摄影工作室</h1></div>
      <div class="text-end" style="display: inline">
        <nav class="navbar navbar-expand-sm">
          <ul class="navbar-nav">
            <li class="nav-item text-center" style="background-color: dimgray; margin-right: 1rem; margin-bottom: 1rem">
              <router-link class="nav-link text-white" to="/index">首页</router-link>
            </li>
            <li class="nav-item text-center" style="background-color: dimgray; margin-right: 1rem; margin-bottom: 1rem">
              <router-link class="nav-link text-white" to="/about">关于</router-link>
            </li>
            <li class="nav-item text-center" style="background-color: dimgray; margin-right: 1rem; margin-bottom: 1rem">
              <router-link class="nav-link text-white" to="/ourworks">我们的作品</router-link>
            </li>
            <li class="nav-item text-center" style="background-color: dimgray; margin-right: 1rem; margin-bottom: 1rem">
              <router-link class="nav-link text-white" to="/connectus">联系我们</router-link>
            </li>
          </ul>
        </nav>
      </div>
    </div>

    <div class="phone">
      <h1>xxxx摄影工作室</h1>
      <div class="dropdown phone">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
          菜单
        </button>
        <div class="dropdown-menu">
          <router-link class="dropdown-item" to="/">首页</router-link>
          <router-link class="dropdown-item" to="/ourworks">我们的作品</router-link>
          <router-link class="dropdown-item" to="/about">关于</router-link>
          <router-link class="dropdown-item" to="/connectus">联系我们</router-link>
        </div>
      </div>

    </div>
    <h2>本站仅为个人练手的小项目，该工作室并不真实存在。</h2>
    <router-view></router-view>
  </div>
</template>

<style scoped>
.pc{
  display: none;
}
.phone{
  display: flex;
  align-items: center;

  /* Remove the next line if you want the span to appear next to the h1 */
  justify-content: space-between;

  padding: 10px 30px;
}
@media screen and (min-width: 640px) {
  .phone {
    display: none;
  }

  .pc {
    display: flex;
    align-items: center;

    /* Remove the next line if you want the span to appear next to the h1 */
    justify-content: space-between;

    padding: 10px 30px;
  }
}
.header {

}
</style>
